<template>
    <div class="color-picker flex" :class="{ 'disabled-picker': props.disabled || props.readonly }">
        <mrc_ess_Popover ref="mrcEssPopover" :disabled="props.disabled || props.readonly">
            <template v-slot:btn>
                <div>
                    <slot name="btn">
                        <div class="w-[80px] h-[26px] rounded-[5px]" :style="{
                            backgroundColor: value
                        }"  :class="{
                            'w-[80px]': !mobile,
                            '!w-[26px]': mobile
                        }"></div>
                    </slot>
                </div>
            </template>
            <template v-slot:default>
                <v-card>
                    <v-color-picker mode="hex" :hide-sliders="props.hideSliders" :show-swatches="props.showSwatches" :hide-canvas="props.hideCanvas" :hide-inputs="props.hideInputs" :disabled="props.disabled" v-model="value"></v-color-picker>
                </v-card>
            </template>
        </mrc_ess_Popover>
    </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import { useDisplay } from 'vuetify'
const { mobile } = useDisplay()
const value = defineModel();
const props = defineProps({
    // 是否禁用
    disabled: {
        type: Boolean,
        default: false,
    },
    // 是否只读
    readonly: {
        type: Boolean,
        default: false,
    },
    // 是否显示调色板
    showSwatches: {
        type: Boolean,
        default: false,
    },
    // 是否隐藏画布
    hideCanvas: {
        type: Boolean,
        default: false,
    },
    // 是否隐藏输入
    hideInputs: {
        type: Boolean,
        default: false,
    },
    // 是否隐藏滑块
    hideSliders: {
        type: Boolean,
        default: false,
    }
})

const mrcEssPopover = ref();

/**
 * 关闭对话框
 */
function close() {
    mrcEssPopover.value.close();
}
/**
 * 显示对话框
 */
function open() {
    mrcEssPopover.value.open();
}
defineExpose({
    close,
    open
})

</script>

<style scoped>
.disabled-picker {
    cursor: default;
}
</style>